<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<!--找一个 -->
		<!--<script type="text/javascript">
			window.onload=function(){
				document.querySelectorAll()
				var btn = document.querySelector("button");
//					document.querySelectorAll()	找全部
//					配合 遍历使用  找到所以button
//					document.querySelector()找一个
				btn.onclick=function(){
					var box =document.querySelector(".box");
					box.style.display="flex";
				}
				
				var close = document.querySelector(".close");
				close.onclick=function(){
					var box =document.querySelector(".box");
					box.style.display="none";
				}
				
				
			}
		</script>-->
		<script type="text/javascript">
			window.onload=function(){
				
				var btns=document.querySelectorAll(".box .title a");
				var forms=document.querySelectorAll(".box .text form");
//				console.log(btns); 给元素加事件   集合不能加事件
				for (var i = 0; i < btns.length; i++) {  //获取a标签并循环
					btns[i].onclick=function(){//第几个a标签的点击事件
						
//						for (var j = 0; j < btns.length; j++) {
//							if(btns[j]==this){
//								btns[j].className = "active";
//							}else{
//								btns[j].className = "";
//								
//							}
//							
//						}
						for (var j = 0; j < btns.length; j++) { //
							console.log(j);
							btns[j].className="";
						}
						this.className="active";
						// 点击时找到idx  给他俩都不显示 
						var idx=this.attributes["data-idx"].value;
						for (var j = 0; j < forms.length; j++) {
							// 这俩循环
							forms[j].style.display="none";
							// 隐藏掉
						}
						forms[idx].style.display="block";
						//显示出来
					}
				}
				
				
				
				
			}
		</script>
		
	</head>
	<body>
		<!--<button type="button">显示登录框</button>
		<div class="box">
			 <div class="content">
			 	<span class="close">&times;</span>
			 </div>
		</div>-->
		
		<div class="content">
			<div class="box">
				<div class="right">
				<div class="title">
					<!--a[href=#]{登录}-->
					<a href="#" class="active" data-idx="0">登录</a>
					<a href="#" data-idx="1">注册</a>
				</div>
				<div class="text">					
				<form action="#" method="get">
					<div>
						<input type="text" name="name" id="name" value="" />
					</div>
					<div>
						<input type="password" name="pwd" id="pwd" value="" />
					</div>
					<div>
						<input type="checkbox" name="chk" id="chk" value="" />
						
						<label for="chk">自动登录</label>
					</div>
					<div>
							<input type="submit" value="登录"/>
					</div>
				
				</form>
				
				<form action="#" method="get">
					
					<input type="submit" value="..."/>
				</form>
				
			</div>
				</div>
				
			</div>
			
		</div>
	</body>
</html>
